import React, { Component, Fragment } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card, Collapse } from 'antd'
import { CaretRightOutlined } from '@ant-design/icons'
class GalleryComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Gallery',
      text: '这就是测试数据',
      defaultActiveKey: ['1'],
    }
    this.handleChange = this.handleChange.bind(this)
  }
  render() {
    const { Panel } = Collapse
    return (
      <Fragment>
        <ContentWrap>
          {/*基础版本知识点*/}
          <CardWrap>
            <Card title="折叠面板基础版">
              <p>1.Panel 必须单独引入</p>
              <p>2.defaultActiveKey默认展开的序号必须是数组</p>
              <p>3.accordion确认只展开一个</p>
              <p>4.expandIcon自定义图标必须要用到</p>
              <p>5.ghost去掉背景色</p>
            </Card>
          </CardWrap>
          {/*基础版本折叠*/}
          <CardWrap>
            <Card title="折叠面板基础版">
              <Collapse defaultActiveKey={['1']} onChange={this.handleChange}>
                <Panel header="标题1" key="1">
                  <p>{this.state.text}</p>
                </Panel>
                <Panel header="标题2" key="2">
                  <p>{this.state.text}</p>
                </Panel>
                <Panel header="标题3" key="3" disabled>
                  <p>{this.state.text}</p>
                </Panel>
              </Collapse>
            </Card>
          </CardWrap>
          {/*折叠面板每次只打开一个*/}
          <CardWrap>
            <Card title="折叠面板每次只打开一次">
              <Collapse
                defaultActiveKey={this.state.defaultActiveKey}
                onChange={this.handleChange}
                accordion
              >
                <Panel header="标题1" key="1">
                  <p>{this.state.text}</p>
                </Panel>
                <Panel header="标题2" key="2">
                  <p>{this.state.text}</p>
                </Panel>
                <Panel header="标题3" key="3">
                  <p>{this.state.text}</p>
                </Panel>
              </Collapse>
            </Card>
          </CardWrap>
          {/*自定义图标折叠面板*/}
          <CardWrap>
            <Card title="自定义图标折叠面板">
              <Collapse
                defaultActiveKey={this.state.defaultActiveKey}
                onChange={this.handleChange}
                accordion
                expandIcon={({ isActive }) => (
                  <CaretRightOutlined rotate={isActive ? 90 : 0} />
                )}
              >
                <Panel header="标题1" key="1">
                  <p>{this.state.text}</p>
                </Panel>
                <Panel header="标题2" key="2">
                  <p>{this.state.text}</p>
                </Panel>
                <Panel header="标题3" key="3">
                  <p>{this.state.text}</p>
                </Panel>
              </Collapse>
            </Card>
          </CardWrap>
          {/*将折叠面板背景色变成透明*/}
          <CardWrap>
            <Card title="背景色变成透明">
              <Collapse
                defaultActiveKey={this.state.defaultActiveKey}
                onChange={this.handleChange}
                accordion
                expandIcon={({ isActive }) => (
                  <CaretRightOutlined rotate={isActive ? 90 : 0} />
                )}
                ghost
              >
                <Panel header="标题1" key="1">
                  <p>{this.state.text}</p>
                </Panel>
                <Panel header="标题2" key="2">
                  <p>{this.state.text}</p>
                </Panel>
                <Panel header="标题3" key="3">
                  <p>{this.state.text}</p>
                </Panel>
              </Collapse>
            </Card>
          </CardWrap>
        </ContentWrap>
      </Fragment>
    )
  }
  handleChange(e) {
    //这里面的 e是个数组获取到key值,如果是都展开的就存储所有的key,都收缩的就是空
    console.log(e)
  }
}

export default GalleryComponent
